<template>
  <div class="dt-content-head-query">
    <div class="dt-head-search">
      <el-input placeholder="请输入任务名称" v-model="keywords" class="input-with-select" size="mini" clearable @clear="SearchProject">
        <el-select v-model="projectId" slot="prepend" placeholder="请选择">
          <el-option label="全部项目" value=""></el-option>
          <el-option :label="item.projectName" :value="item.rootProjectId+''" v-for="item in projectList" :key="item.rootProjectId"></el-option>
        </el-select>
        <el-button slot="append" @click="SearchProject">搜索</el-button>
      </el-input>
    </div>
    <div class="dt-head-btn">
      <el-radio-group v-model="localSortType" size="mini" @input="changeModel">
        <el-radio-button label="0">时间排序</el-radio-button>
        <el-radio-button label="1">类型排序</el-radio-button>
        <el-radio-button label="2">列表模式</el-radio-button>
      </el-radio-group>
      <div class="dt-head-btn-line"></div>
      <el-switch v-model="localShowComplete" inactive-text="显示已完成" @change="changeShow">
      </el-switch>
    </div>
  </div>
</template>
  <script>
export default {
  props: {
    sortType: String,
    activeName: String,
    showComplete: String
  },
  data() {
    return {
      localSortType: this.sortType,
      localActiveName: this.activeName,
      localShowComplete: JSON.parse(this.showComplete),
      Uid: this.$tools.getDecrypt(this.$store.state.uid), //用户id,
      projectId: '',
      projectList: [],
      keywords: ''
    }
  },
  computed: {},
  methods: {
    changeModel(val) {
      this.localActiveName = this.$tools.getQuery(this).elTab
      var data = { elTab: this.localActiveName, sortType: this.localSortType, showComplete: this.localShowComplete }
      this.$router.push('/main/#/wt?tab=list&' + this.$qs.stringify(data))
      this.$emit('changeModel', this.localSortType)
    },
    changeShow(val) {
      this.localActiveName = this.$tools.getQuery(this).elTab
      var data = { elTab: this.localActiveName, sortType: this.localSortType, showComplete: this.localShowComplete }
      this.$router.push('/main/#/wt?tab=list&' + this.$qs.stringify(data))
      this.$emit('changeShow', this.localShowComplete)
    },
    getAllProject() {
      var data = [
          {
            userId: this.Uid
          }
        ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/project/projectSelector'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.projectList = data.data
            }
          })
        })
        .catch((error) => {})
    },
    SearchProject() {
      this.$emit('searchProject', this.keywords, this.projectId)
    }
  },

  mounted() {
    this.getAllProject()
  }
}
</script>
  <style scoped>
.dt-content-page {
  margin: 0;
  background-color: #f2f3f5;
}
.el-select {
  width: 280px;
}
.dt-head-search .input-with-select {
  width: 660px;
}
.dt-head-btn {
  display: flex;
  align-items: center;
}
.dt-head-btn-line {
  width: 1px;
  height: 14px;
  background-color: #e9eef7;
  margin: 0 20px;
}
.input-with-select >>> .el-input-group__append {
  background-color: #f0f5ff;
}
.input-with-select >>> .el-input-group__prepend .el-input--suffix,
.input-with-select >>> .el-input__inner {
  color: #1f1f1f;
}
.input-with-select >>> .el-button {
  color: #2f54eb;
  background-color: #f0f5ff;
  padding: 0px 20px;
}
</style>